/* 标签选择器 */
div {
	font-size: 25px;
	color: red;
	border: 1px solid black;
	border-radius: 5px;
	width: 150px;
	text-align: center;
	background-color: whitesmoke;
}

h1 {
	color: red;
}

/* 类选择器: .className(类名自定义) */
.main_h1 {
	color: red;
}

/* id选择器: #idName(id自定义，但必须唯一) */
#id_h1 {
	color: orange;
}

/*后代选择器：在某个元素的所有包含元素*/
body h1 {
	color: orange;
}

/*子选择器：在某个元素的所有下一层级的元素*/
body>h1 {
	color: orange;
}

body>p {
	color: red;
}

/*相邻兄弟选择器：在某个元素的同层级的【下一个】元素，即下一个相邻元素*/
.li_first+li {
	color: orange;
}

/*通用选择器：在某个元素的同层级的所有【下面】元素*/
.li_first~li {
	color: orange;
}

/*结构伪类选择器*/
ul li:first-child {
	background-color: orangered;
}

ul li:last-child {
	background-color: yellowgreen;
}

ul p:first-child {
	background-color: cyan;
}

/*选择某元素父级标签下的第i个相同元素: 从【最里层】开始找所有满足条件的元素；
  若第i个元素不是相同的元素则无效
  按照顺序来*/
p:nth-child(4) {
	color: red;
}

/*选择某元素父级标签下的第i个相同元素: 从【最里层】开始找所有满足条件的元素；
  按照类型来*/
p:nth-of-type(3) {
	color: #f904fe;
}

/*属性选择器*/
/*xxx属性值等于xxx*/
a[id=first] {
	background: #f904fe;
}

/*xxx属性值包含xxx*/
a[href*=http] {
	background: orangered;
}

/*xxx属性值以xxx开头*/
a[href^=https] {
	background: #001cab;
}

/*xxx属性值以xxx结尾*/
a[href$=txt] {
	background: #ffdf00;
}
